<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>弹窗初始化-JavaScript-WSCORE</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<ol>
			<li><a href="../../index.html">首页</a></li>
			<li>dialog</li>
		</ol>
	</div>
	
	<h1>Dialog</h1>
	<div class="intro">
		用途: 指定某元素(链接)以Dialog模式显示<br />
		示例: 
		
		
		<a dialog href="demo.html">默认样式</a> | 
		<a dialog dialog-no-title="true" href="demo.html">无标题栏</a>
		
		
		
		<!--
		<a dialog dialog-no-title="true" dialog-selector="[code-demo]" href="#">代码片段</a> | 
		<a dialog dialog-no-title="true" dialog-selector="[code-demo-css]" dialog-width="1000" dialog-height="300" href="#">CSS结构</a> | 
		<a dialog dialog-no-title="true" dialog-selector="[code-demo-html]" href="#">HTML结构</a>
		-->
<!--CODE-BEGINE-->
<div code-demo style="display:none">
<code title="代码片段">// HTML
<a dialog href="demo.html">Demo</a>
// jQuery
// 无特殊需求, 以下代码不需要编写
// HTML文档载入(更新)完成后自动执行
$('#example').wscbase_dialog();</code>
</div>
<div code-demo-css style="display:none">
<code>// 主结构
.wsc-dialog, 
.wsc-dialog-masker {position:absolute;display:none;}
.wsc-dialog-wrap {overflow:hidden;position:relative;}
.wsc-dialog-close {width:16px;height:16px;line-height:16px;overflow:hidden;display:block;text-align:center;text-indent:16px;position:absolute;top:8px;right:8px;z-index:2;}
.wsc-dialog-title h3 {padding:0 32px 0 8px;line-height:30px;font-size:14px;font-weight:normal;}
.wsc-dialog-body {overflow-x:hidden;overflow-y:auto;}
// A样式
.a.wsc-dialog .wsc-dialog-wrap {border:1px solid #ccc;background-color:#fff;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.1);}
.a.wsc-dialog a.wsc-dialog-close {background:url(../image/wscui/dialog/a.close.png) no-repeat center center;}
.a.wsc-dialog a:hover.wsc-dialog-close {background-image:url(../image/wscui/dialog/a.close.hover.png);}
.a.wsc-dialog .wsc-dialog-title {border-bottom:1px solid #ddd;background-color:#f1f1f1;}
.a.wsc-dialog .wsc-dialog-title h3 {color:#666;text-shadow:1px 1px 1px #fff;}
.a.wsc-dialog .wsc-dialog-loading {line-height:64px;background:url(../image/wscui/dialog/a.loading.gif) no-repeat center center;}
.a.wsc-dialog .wsc-dialog-error {padding:8px;color:#f00;}
.a.wsc-dialog-masker {background-color:rgba(0,0,0,.5);}</code>
</div>
<div code-demo-html style="display:none">
	<code><div class="wsc-dialog">
	<div class="wsc-dialog-wrap">
		<a href="#" class="wsc-dialog-close">Close</a>
		<div class="wsc-dialog-title">
			<h3>
				Dialog-Title
			</h3>
		</div>
		<div class="wsc-dialog-body">
			[Dialog-Content]
		</div>
	</div>
</div>
<div class="wsc-dialog-masker"></div></code>
</div>
<!--CODE-FINISH-->
	</div>

	<h2>属性<em>HTML</em></h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>属性名</th>
					<th>属性值</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>必须</td>
					<td>dialog</td>
					<td>
						<a dialog dialog-selector="[code-dialog-theme]" dialog-no-title="true" href="javascript:void(0)">a-z</a>
						<div code-dialog-theme style="display:none">
							<code>//1: A样式
<a dialog href="demo.html">A样式</a>
<a dialog="a" href="demo.html">A样式</a>
// 2: B样式
<a dialog="b" href="demo.html">B样式</a></code>
						</div>
					</td>
					<td>[a-z]样式名(默认：a样式)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-no-esc</td>
					<td>
						<a dialog dialog-selector="[code-dialog-no-esc-true]" dialog-no-title="true" href="javascript:void(0)">true</a> | 
						<a dialog dialog-selector="[code-dialog-no-esc-false]" dialog-no-title="true" href="javascript:void(0)">false</a>
						<div code-dialog-no-esc-true style="display:none">
							<code title="禁用"><a dialog dialog-no-esc="true" href="demo.html">禁用</a></code>
						</div>
						<div code-dialog-no-esc-false style="display:none">
							<code title="允许"><a dialog href="demo.html">默认允许</a>
<a dialog dialog-no-esc="false" href="demo.html">设置允许</a></code>
						</div>
					</td>
					<td>是否允许ESC键关闭Dialog(默认：false, 允许)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-no-drag</td>
					<td>
						<a dialog dialog-selector="[code-dialog-no-drag-true]" dialog-no-title="true" href="javascript:void(0)">true</a> | 
						<a dialog dialog-selector="[code-dialog-no-drag-false]" dialog-no-title="true" href="javascript:void(0)">false</a>
						<div code-dialog-no-drag-true style="display:none">
							<code title="禁用"><a dialog dialog-no-drag="true" href="demo.html">禁用</a></code>
						</div>
						<div code-dialog-no-drag-false style="display:none">
							<code title="允许"><a dialog href="demo.html">默认允许</a>
<a dialog dialog-no-drag="false" href="demo.html">设置允许</a></code>
						</div>
					</td>
					<td>是否允许拖拽变更位置(默认：false, 允许)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-no-masker</td>
					<td>
						<a dialog dialog-selector="[code-dialog-no-masker-true]" dialog-no-title="true" href="javascript:void(0)">true</a> | 
						<a dialog dialog-selector="[code-dialog-no-masker-false]" dialog-no-title="true" href="javascript:void(0)">false</a>
						<div code-dialog-no-masker-true style="display:none">
							<code title="无覆盖层"><a dialog dialog-no-masker="true" href="demo.html">禁用覆盖层</a></code>
						</div>
						<div code-dialog-no-masker-false style="display:none">
							<code title="有覆盖层"><a dialog href="demo.html">默认显示</a>
<a dialog dialog-no-masker="false" href="demo.html">设置显示</a></code>
						</div>
					</td>
					<td>是否显示半透明覆盖层(默认：false, 显示)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-no-title</td>
					<td>
						<a dialog dialog-selector="[code-dialog-no-title-true]" dialog-no-title="true" href="javascript:void(0)">true</a> | 
						<a dialog dialog-selector="[code-dialog-no-title-false]" dialog-no-title="true" href="javascript:void(0)">false</a>
						<div code-dialog-no-title-true style="display:none">
							<code title="无标题栏"><a dialog dialog-no-title="true" href="demo.html">禁用</a></code>
						</div>
						<div code-dialog-no-title-false style="display:none">
							<code title="有标题栏"><a dialog href="demo.html">默认显示</a>
<a dialog dialog-no-title="false" href="demo.html">设置显示</a></code>
						</div>
					</td>
					<td>是否显示标题栏(默认：false, 显示)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-width</td>
					<td>
						<a dialog dialog-selector="[code-dialog-width]" dialog-no-title="true" href="javascript:void(0)">int</a>
						<div code-dialog-width style="display:none">
							<code title="指定宽度"><a dialog dialog-width="500" href="demo.html">内容区500px宽度</a></code>
						</div>
					</td>
					<td>
						指定Dialog宽度(格式: 整数, 默认: 自动)
					</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-height</td>
					<td>
						<a dialog dialog-selector="[code-dialog-height]" dialog-no-title="true" href="javascript:void(0)">int</a>
						<div code-dialog-height style="display:none">
							<code title="指定高度"><a dialog dialog-height="300" href="demo.html">内容区300px高度</a></code>
						</div>
					</td>
					<td>
						指定Dialog高度(格式: 整数, 默认: 自动)
					</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>dialog-selector</td>
					<td>
						<a dialog dialog-selector="[code-dialog-selector]" dialog-no-title="true" href="javascript:void(0)">jQuery</a> (Selector)
						<div code-dialog-selector style="display:none">
							<code title="指定元素">// Dialog内容
<div id="example">Dialog-Content</div>
// Dialog元素
<a dialog dialog-selector="#example" href="javascript:void(0)">载入id="example"元素</a></code>
						</div>
					</td>
					<td>
						将Selector匹配的元素作为内容在Dialog中显示
					</td>
				</tr>
				<tr>
					<td>保护</td>
					<td>dialog-inited</td>
					<td>true | false</td>
					<td>避免重复初始化</td>
				</tr>
				<tr>
					<td>保护</td>
					<td>dialog-src</td>
					<td>true | false</td>
					<td>绑定Dialog窗口</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>
	